.dispalay-gallery {
  &-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
  }
  &-content {
    width: 100%;
    .content {
      &-header {
        width: 100%;
        > span {
          font-size: 14px;
        }
      }
      &-body {
        display: flex;
        margin-top: 20px;
        .body {
          &-left {
            width: 700px;
            height: 500px;
            // padding: 5px;
            box-sizing: border-box;
            border: 2px dashed #ccc;
            position: relative;
            .dustbin {
              position: absolute;
              right: 0;
              top: 5px;
              width: 200px;
              height: 100px;
            }
          }
          &-right {
            width: calc(100% - 700px);
            height: 500px;
            box-sizing: border-box;
            padding-left: 20px;
            position: relative;
            display: flex;
            .tree-wrapper {
              height: 100%;
              width: 360px;
              .vue-treeselect__control,
              .vue-treeselect__menu {
                border-radius: 0;
              }
            }
            .image-wrapper {
              width: 100px;
              height: 80px;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              background-position: center center;
            }
          }
        }
      }
      &-footer {
        text-align: center;
        margin-top: 20px;
      }
    }
  }
}

.dragable-element {
  cursor: move;
  user-select: none;
}

.dragable-ing {
  box-sizing: border-box;
  border: 1px solid yellowgreen;
}

.dragable-inner {
  width: 100%;
  height: 100%;
  position: relative;
  .div {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -15px;
    left: 20px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    font-size: 20px;
    color: #fff;
    > i {
      margin-top: -15px;
    }
  }
}
